<template>
  <div class="order-detail-page flex-col">
    <navbar :back="isBack" bg="linear-gradient(to right, rgb(253, 118, 0) , rgb(251, 59, 8))" title="订单详情"
            titleColor="#ffffff"  @goBack="goBack"/>

    <scroll-view class="order-detail-page flex-1" scroll-y>
      <div class="status-box">
        <div class="status-txt">{{order.status_name}}</div>
        <!--<img class="status-img" src="/static/assets/img/order/order-status.jpg"/>-->
      </div>

      <div class="address-card-box">
        <div class="address-card-item flex-row-v-center">
          <div class="flex-1">
            <div class="status-txt">{{order.status_name}}</div>
            <div class="time-txt">{{order.updateTime}}</div>
          </div>
        </div>
        <div class="address-card-item flex-row-v-center" @click="updateOrderAddress">
          <div class="flex-1 flex-col">
            <div class="top flex-row" v-if="order.order_ext">
              <div class="name">收货人：{{order.order_ext.receive_name}}</div>
              <div class="phone">{{order.order_ext.receive_contact}}</div>
            </div>
            <div class="bottom flex-row">
              <div class="default" v-if="order.order_ext ? order.order_ext.receive_is_default : 1">
                <span>默认</span>
              </div>
              <div class="address flex-1">{{order.order_ext.receive_province}} {{order.order_ext.receive_city}}
                {{order.order_ext.receive_county}} {{order.order_ext.receive_address}}
              </div>
            </div>
          </div>
          <div class="arrow-box">
            <img src="/static/assets/img/icon/icon-arrow-right.png"/>
          </div>
        </div>
      </div>

      <div class="goods-info-box" v-for="item in order.order_info_list" :key="item.id">
        <div class="top flex-row">
          <img class="img" :src="item.cover_img_url"/>
          <div class="info-box flex-1 flex-col">
            <div class="title-box flex-row-space-between">
              <div class="goods-txt">
                {{item.goods_name}}
              </div>
              <div class="num-box">
                x{{item.amount}}
              </div>
            </div>
            <div class="label-box">{{item.goods_spec_name}}</div>
          </div>
        </div>
        <div class="middle flex-row">
          <div>共{{item.amount}}件商品 付款：¥{{item.processCharge}}</div>
        </div>
        <div class="bottom flex-row" v-if="item.status == 10">
          <div class="btn flex-center" @click="remindOrder">提醒发货</div>
        </div>
      </div>

      <div class="order-info-box flex-col">
        <div class="title-txt">订单信息</div>
        <div class="content-box">
          <div class="content-item flex-row-v-center">
            <div class="key-txt">订单信息：</div>
            <div class="value-txt">{{order.sn}}</div>
          </div>
          <div class="content-item flex-row-v-center">
            <div class="key-txt">创建时间：</div>
            <div class="value-txt">{{order.createTime}}</div>
          </div>
          <div class="content-item flex-row-v-center">
            <div class="key-txt">发货时间：</div>
            <div class="value-txt">{{order.deliveryTime}}</div>
          </div>
          <div class="content-item flex-row-v-center">
            <div class="key-txt">成交日期：</div>
            <div class="value-txt">{{order.signTime}}</div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,

        order: {
          order_ext: {

          }
        }
      }
    },

    onLoad () {
      let id = this.$root.$mp.query['order_id']
      let that = this
      this._getOrderDetail(id)
      Core.Event.on('select_address', function (address) {
        that._updateOrderAddress(id, address.id)
      })
    },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      remindOrder () {
        Core.Api.Order.remindOrder(this.order.id).then(res => {
          wx.showToast({
            title: '提醒成功',
            icon: 'success',
            duration: 1000
          })
        })
      },

      updateOrderAddress () {
        if (this.order.status != 5) {
          return
        }
        Common.go('/pages/收货地址/main')
      },

      _updateOrderAddress (orderId, addressId) {
        Core.Api.Order.updateOrderAddress(orderId, addressId)
          .then(res => {
            this._getOrderDetail(orderId)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getOrderDetail (orderId) {
        Core.Api.Order.orderDetail(orderId)
          .then(res => {
            let order = res.order
            order.createTime = Core.Util.timeFormat(order.create_time)
            let orderInfoList = order.order_info_list
            orderInfoList.forEach(v => {
              v.processCharge = Core.Util.processMoney(v.charge + v.express_fee)
            })
            order.deliveryTime = order.delivery_time ? Core.Util.timeFormat(order.delivery_time) : '--'
            order.signTime = order.delivery_time ? Core.Util.timeFormat(order.sign_time) : '--'
            this.order = order
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-detail-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .order-detail-page {
      height: 100%;
      overflow-y: auto;

      .status-box {
        height: 140px;
        background: linear-gradient(to right, rgb(253, 118, 0), rgb(251, 59, 8));
        position: relative;
        .status-txt {
          font-size: 18px;
          color: #ffffff;
          position: absolute;
          top: 48px;
          left: 12px;
        }
        .status-img {
          width: 108px;
          height: 50px;
          position: absolute;
          top: 30px;
          right: 12px;
        }
      }

      .address-card-box {
        margin: 0 12px;
        background: #ffffff;
        position: relative;
        top: -56px;
        border-radius: 4px;
        padding: 0 12px;
        .address-card-item {
          padding: 16px 0;
          border-bottom: 1px solid rgb(242, 242, 242);
          .status-txt {
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 14px;
          }
          .time-txt {
            color: rgb(174, 174, 174);
            font-size: 12px;
            line-height: 12px;
          }
          .arrow-box {
            img {
              width: 24px;
              height: 24px;
            }
          }
          .top {
            .name {
              font-size: 16px;
              color: rgb(95, 95, 95);
              margin-right: 10px;
            }
            .phone {
              color: rgb(160, 160, 160);
            }
          }
          .bottom {
            .default {
              margin-right: 10px;
              span {
                color: #ffffff;
                background: rgb(249, 59, 8);
                padding: 1px 4px;
                font-size: 14px;
              }
            }
            .address {
              margin-top: 7px;
              font-size: 12px;
              color: rgb(195, 195, 195);
              line-height: 14px;
            }
          }
        }
      }

      .goods-info-box {
        margin: 10px 12px 0 12px;
        background: #ffffff;
        position: relative;
        top: -56px;
        border-radius: 4px;
        padding: 16px 12px;
        .img {
          width: 82px;
          height: 82px;
          margin-right: 10px;
        }
        .info-box {
          align-items: flex-start;
          .title-box {
            font-size: 14px;
            line-height: 14px;
            width: 100%;
            margin-bottom: 10px;
            .goods-txt {
              color: rgb(138, 138, 138)
            }
            .num-box {
              color: rgb(190, 190, 190);
            }
          }
          .label-box {
            font-size: 12px;
            padding: 2px 4px;
            line-height: 14px;
            background-color: rgb(247, 247, 247);
            color: rgb(138, 138, 138)
          }
        }
        .middle {
          justify-content: flex-end;
          color: rgb(195, 195, 195);
          font-size: 14px;
        }
        .bottom {
          justify-content: flex-end;
          margin-top: 4px;
          .btn {
            border: 1px solid rgb(251, 88, 44);
            height: 30px;
            border-radius: 15px;
            padding: 0 14px;
            color: rgb(251, 88, 44);
          }
        }
      }

      .order-info-box {
        position: relative;
        top: -56px;
        background: #ffffff;
        margin-top: 10px;
        padding: 12px 24px;
        .title-txt {
          font-size: 16px;
          line-height: 32px;
          color: rgb(145, 145, 145);
        }
        .content-item {
          font-size: 12px;
          line-height: 24px;
          .key-txt {
            color: rgb(154, 154, 154);
          }
          .value-txt {
            color: rgb(179, 179, 179);
          }
        }
      }
    }
  }
</style>
